<template>
	<div class="w-[500px] p-2 rounded-[12px] bg-white item_bg">
		<el-descriptions :column="2" size="small" border>
			<el-descriptions-item label="设备名称" min-width="80" label-class-name="my-label" class-name="my-content">{{
				siteData?.equipmentName
			}}</el-descriptions-item>
			<el-descriptions-item label="采集时间" min-width="80" label-class-name="my-label" class-name="my-content">{{
				siteData?.recordTime
			}}</el-descriptions-item>
			<el-descriptions-item label="所属企业" min-width="80" label-class-name="my-label" class-name="my-content">{{
				siteData?.airSiteName
			}}</el-descriptions-item>
			<el-descriptions-item label="设备状态" min-width="80" label-class-name="my-label" class-name="my-content">
				<el-tag :type="siteData?.status === 2 ? 'success' : 'danger'" size="small">{{ siteData?.status === 2 ? '在线' : '离线' }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="AQI" min-width="80" v-if="siteData?.aqi?.aqi" label-class-name="my-label" class-name="my-content">
				<el-tag effect="dark" size="small" class="w-full !text-[#000]" :color="aqiInfo?.color">{{ siteData?.aqi?.aqi }}</el-tag>
			</el-descriptions-item>
			<el-descriptions-item label="首要污染物" min-width="80" v-if="siteData?.aqi?.aqi" label-class-name="my-label" class-name="my-content">
				{{ siteData?.aqi?.name }}
			</el-descriptions-item>
			<el-descriptions-item label="污染等级" min-width="80" v-if="siteData?.aqi?.aqi" label-class-name="my-label" class-name="my-content">
				<el-popover width="320" placement="left" title="污染影响和措施">
					<div class="indent-[2em]">影响：{{ aqiInfo?.influence }}</div>
					<div class="indent-[2em]">措施：{{ aqiInfo?.measures }}</div>
					<template #reference>
						<el-tag effect="dark" size="small" class="w-full !text-[#000] cursor-pointer" :color="aqiInfo?.color">{{ siteData?.aqi?.degree }}</el-tag>
					</template>
				</el-popover>
			</el-descriptions-item>
			<el-descriptions-item
				v-for="(item, index) in siteData?.detail"
				:label="item.cnName"
				:key="index"
				label-class-name="my-label"
				class-name="my-content"
				>{{ item.val }} {{ item.unit }}</el-descriptions-item
			>
		</el-descriptions>
	</div>
</template>

<script setup lang="ts" name="markerLabel">
import { level } from '/@/views/analysis/gisMap/data';
const prop = defineProps({
	siteData: {
		type: Object,
		default: () => {},
	},
});
const getLevel = (l: number) => {
	const item = level.find((d) => {
		return d.pollutionDegree === l;
	});
	return item;
};
const aqiInfo = computed(() => {
	return getLevel(prop.siteData?.aqi?.pollutionDegree);
});
</script>

<style lang="scss" scoped>
:deep(.el-tag) {
	border: none;
}
.item_bg {
	box-shadow: 0px 12px 32px 4px rgba(7, 78, 110, 0.6), 0px 8px 20px rgba(7, 78, 110, 0.6);
	border-radius: 12px;
	background-color: #1c5d6e !important;
}
:deep(.my-label) {
	background-color: #1c5d6e !important;
	color: #08c6f9 !important;
}
:deep(.my-content) {
	background: #1c5d6e;
	color: #fff !important;
}
:deep(.el-descriptions__body) {
	background-color: #1c5d6e !important;
}
</style>
